<template>
	<view class="development-mode-components" v-if="env == 'development'">
		<movable-area class="movable-area">
			<movable-view class="dev-button" :x="devPosition.x" :y="devPosition.y" direction="all" @change="handleMove" @click="handleClick">开发设置</movable-view>
		</movable-area>
		<u-popup v-model="showPopup" mode="bottom" border-radius="16" closeable height="800" @open="$refs.tabs.init()">
			<view class="popup-wrap">
				<u-tabs ref="tabs" :list="tabs" :current="curTab" :active-color="themeColor" @change="handleTabsChange"></u-tabs>
				<view class="tab-item">
					<u-field v-model="curApiUrl" label="API地址" :placeholder="curApiUrl || '请输入地址'"></u-field>
					<u-radio-group v-model="curApiUrl">
						<!-- #ifdef MP-WEIXIN -->
						<u-radio :name="apiUrls.develop">开发：{{ apiUrls.develop }}</u-radio>
						<u-radio :name="apiUrls.test">测试：{{ apiUrls.test }}</u-radio>
						<u-radio :name="apiUrls.trial">体验：{{ apiUrls.trial }}</u-radio>
						<u-radio :name="apiUrls.release">正式：{{ apiUrls.release }}</u-radio>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<u-radio :name="apiUrls.develop">开发：{{ apiUrls.develop }}</u-radio>
						<u-radio :name="apiUrls.test">测试：{{ apiUrls.test }}</u-radio>
						<u-radio :name="apiUrls.release">正式：{{ apiUrls.release }}</u-radio>
						<!-- #endif -->
					</u-radio-group>
					<button class="set-button" @click="handleSetApiUrl">设置</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
/**
 * development-mode 开发模式组件
 * @description 开发常用工具组件
 * @property {String} mode 显示类型 color-背景色 image-背景图片
 * @property {Boolean} fixed 是否固定定位
 * @property {Number, String} height 容器的高度
 * @property {Number} immersive 沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效（默认false）
 * @property {Number} offsetTop 顶部高度补偿，在fixed下生效
 * @property {String} imageSrc 图片地址
 * @property {String} bgColor 背景颜色
 * @property {Number, String} zIndex 组件显示层级
 * @example <head-wrap fixed mode="image" height="320" image-src=""></head-wrap>
 */
import { mapState } from 'vuex';
import config from '@/request/config.js';
export default {
	name: 'development-mode',
	props: {},
	data() {
		return {
			showPopup: false,
			tabs: [
				{
					name: '接口配置'
				}
			],
			curTab: 0,
			env: '',
			apiUrls: [],
			curApiUrl: '',
			oldApiUrl: '',
		};
	},
	mounted() {
		this.env = process.env.NODE_ENV;
		this.apiUrls = config.baseUrls;
		this.oldApiUrl = uni.getStorageSync('baseUrl') || '';
		this.curApiUrl = uni.getStorageSync('baseUrl') || '';
	},
	computed: {
		...mapState(['devPosition'])
	},
	methods: {
		// 设置地址
		handleSetApiUrl() {
			if(this.curApiUrl == this.oldApiUrl) {
				this.showPopup = false;
			}else {
				this.showPopup = false;
				uni.setStorageSync('baseUrl', this.curApiUrl);
				this.$toast('设置成功,请销毁程序进程,重新进入');
			}
		},
		// 点击事件
		handleClick() {
			this.showPopup = true;
		},
		// 拖动按钮
		handleMove(e) {
			const { x, y } = e.detail;
			this.$debounce(() => {
				this.$setState('devPosition', { x, y });
			});
		},
		// 切换tabs
		handleTabsChange(index) {
			this.curTab = index;
		}
	}
};
</script>

<style lang="scss">
.development-mode-components {
	width: 100%;
	display: flex;
	.movable-area {
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9999;
		position: fixed;
		pointer-events: none;
		.dev-button {
			width: 180rpx;
			height: 60rpx;
			color: #fff;
			display: flex;
			font-size: 28rpx;
			align-items: center;
			border-radius: 12rpx;
			pointer-events: auto;
			justify-content: center;
			background-color: #04be02;
			box-shadow: 0 0 0.61538462em rgba(0, 0, 0, 0.4);
		}
	}
	.popup-wrap {
		width: 100%;
		height: 100%;
		display: flex;
		padding: 15rpx 30rpx;
		flex-direction: column;
		.tab-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			.set-button {
				color: #fff;
				height: 68rpx;
				border: none;
				display: flex;
				margin: 0 60rpx;
				font-size: 28rpx;
				margin-top: auto;
				align-items: center;
				justify-content: center;
				background-color: $primary-color;
			}
		}
	}
}
</style>
